<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:soap="http://www.w3.org/2003/05/soap-envelope"
    xmlns:dssp="http://schemas.microsoft.com/xw/2004/10/dssp.html"
    xmlns:cmps03="http://www.robot-electronics.co.uk/2006/10/cmps03hardware.html"    >

  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:comment>
      <!-- Service Header Info -->
    </xsl:comment>
    <xsl:variable name="title">
      CMPS03 Hardware Service
    </xsl:variable>
    <xsl:variable name="serviceName">
      CMPS03 Hardware Service
    </xsl:variable>
    <xsl:variable name="description">
      The compass uses the Philips KMZ51 magnetic field sensor, which is sensitive enough to detect the Earths magnetic field. The output from two of them mounted at right angles to each other is used to compute the direction of the horizontal component of the Earths magnetic field.
    </xsl:variable>

    <xsl:call-template name="MasterPage">
      <xsl:with-param name="serviceName" select="$serviceName" />
      <xsl:with-param name="description" select="$description" />
      <!-- If title is not provided, serviceName will be used instead. -->
      <xsl:with-param name="title">
        <xsl:value-of select="$serviceName" />
        <xsl:if test="$title != ''">
          <xsl:text> - </xsl:text>
          <xsl:value-of select="$title" />
        </xsl:if>
      </xsl:with-param>
      <!-- Possible values for navigation are: 'Open', 'Closed', and 'None'
           'Open' is the default value. -->
      <xsl:with-param name="navigation" select="'Open'" />
      <!-- The contents of head param will be placed just before the </head> tag in html. -->
      <xsl:with-param name="head">
        <link rel="stylesheet" type="text/css" href="/resources/I2CHardware/Devantech.Services.I2C.Hardware.resources.DevantechI2CHardware.Stylesheet.css" />

        <style type="text/css">
          /* Service-specific stylesheet goes here */

        </style>
        <script language="javascript" type="text/javascript" src="/resources/CMPS03Hardware/Devantech.Services.CMPS03.Hardware.Transforms.Common.js"/>
        <script language="javascript" type="text/javascript">
          <xsl:text>
var pollingFrequency = </xsl:text>
          <xsl:value-of select="/cmps03:CMPS03HardwareState/cmps03:PollDelay"/>
          <xsl:text>;
var timeStamp = "</xsl:text>
          <xsl:value-of select="/cmps03:CMPS03HardwareState/cmps03:Timestamp"/>
          <xsl:text>";
var heading = </xsl:text>
          <xsl:value-of select="/cmps03:CMPS03HardwareState/cmps03:Reading"/>
          <xsl:text>;
</xsl:text>

          <![CDATA[

function onState(state)
{
    if (state.Timestamp != timeStamp)
    {
      timeStamp = state.Timestamp;
      
        var cell = document.all("Reading");
        if (cell != null)
        {
          cell.innerText = state.Reading;
        }
        
        if (heading != parseFloat(state.Reading))
        {
          heading = parseFloat(state.Reading);
          setNewTarget(state.Reading);
        }
    }
    readState(pollingFrequency);
}

function startPolling()
{
  setStateCompletion("onState");
  readState(pollingFrequency);
}

setTimeout("startPolling()", 1000);


var current = 180;
var target = 0;
var turning = false;

function setNewTarget(angle)
{
    target = clip(parseFloat(angle));
    
    if (!turning)
    {
        turning = true;
        setTimeout("setRotation()", 25);
    }
}

function clip(value)
{
    while (value > 180)
    {
        value -= 360;
    }
    
    while (value < -180)
    {
        value += 360;
    }
    
    return value;
}

function setRotation()
{
    var delta = clip(target - current);
    
    if (delta > 20)
    {
        delta = 20;
    }
    else if (delta < -20)
    {
        delta = -20;
    }
    else if (delta == 0)
    {
        turning = false;
        return;
    }
    
    current = clip(current + delta);

    var angle = current;    
    
    var compass = document.all("compass");
    var filter = compass.filters[0];
    
    // note: use -ve angle, because compasses are clockwise
    var radians = -angle * Math.PI / 180;
    var cosTheta = Math.cos(radians);
    var sinTheta = Math.sin(radians);
    
    filter.M11 = cosTheta;
    filter.M12 = -sinTheta;
    filter.M21 = sinTheta;
    filter.M22 = cosTheta;
    
    //debugger
    
    filter.Dx = 64 * (1 - cosTheta + sinTheta);
    filter.Dy = 64 * (1 - cosTheta - sinTheta);
    
    setTimeout("setRotation()", 25);
}    




          ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <!-- Match service state's document element. -->

	<xsl:template match="/cmps03:CMPS03HardwareState">
        <div class="Module">
          <div class="RightColumn">
            <table class="Config">
              <tr>
                <th colspan="2">
                  Config
                </th>
              </tr>
              <tr>
                <td class="SmallText">
                  Auto-Poll
                </td>
                <td class="SmallText">
                  <form method="POST">
                    <xsl:attribute name="id">EnablePollingForm</xsl:attribute>
                    <input type="hidden" name="EnablePollingChange" value="true"/>

                    <input name="EnablePolling" onclick="document.getElementById(this.id + 'Form').submit();"
                      title="Click to enable Polling of the sensor" type="checkbox">
                      <xsl:attribute name="id">EnablePolling</xsl:attribute>
                      <xsl:if test="cmps03:EnablePolling = 'true'">
                        <xsl:attribute name="checked">CHECKED</xsl:attribute>
                        <xsl:attribute name="value">on</xsl:attribute>
                      </xsl:if>
                    </input>
                  </form>
                </td>
              </tr>

              <tr>
                <td class="SmallText">
                  Delay
                </td>
                <td>
                  <form method="POST" >
                    <xsl:attribute name="id">PollDelayForm</xsl:attribute>
                    <input  class="Editable" maxlength="5" name="PollDelay" onblur="this.className='Editable';document.getElementById(this.id + 'Form').submit();"
                      onfocus="this.className='EditableActive'" title="Click to change delay between polling"
                      type="text" >
                      <xsl:attribute name="id">PollDelay</xsl:attribute>
                      <xsl:attribute name="value">
                        <xsl:value-of select="cmps03:PollDelay" />
                      </xsl:attribute>
                    </input>
                  </form>
                </td>
              </tr>
            </table>
          </div>

          <span class="ModuleName">
            CMPS03 found at I2C Address <xsl:value-of select="cmps03:I2CAddress"/>
          </span>
          <br/>
          <span class="SmallText" id="Timestamp">
            Last contact: <xsl:value-of select="cmps03:Timestamp"/>
          </span>
          <br/>
          <br/>
          <span class="key">
            Reading:
          </span>
          <span class="value" id="Reading">
            <xsl:value-of select="cmps03:Reading"/>
          </span>
          <br/>


          <div style="width:128px;height:128px;background:white;">
            <div id="compass" style="width:128px;height:128px;filter:progid:DXImageTransform.Microsoft.Matrix(FilterType='nearest neighbor');">
              <img src="/resources/CMPS03Hardware/Devantech.Services.CMPS03.Hardware.Transforms.Compass.png"
                   width="128px" height="128px"
                   onload="setNewTarget({cmps03:Reading});"/>
            </div>
          </div>

        </div>
        
          <br clear="all" />
					<div class="hr"></div>
				<div class="RightColumn">
					<a class="LinkSmall" 
							href="http://www.robot-electronics.co.uk/htm/cmps3doc.shtml" 
							target="_new">View Devantech Documentation</a>
				</div>
					<span class="SmallText">Config at: /store/Devantech.Services.CMPS03.Hardware.xml</span>
		</xsl:template>
	</xsl:stylesheet>
	